<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body,html,#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
		}

		#golist {
			display: none;
		}

		@media ( max-device-width : 780px) {
			#golist {
				display: block !important;
			}
		}
	</style>
	<script type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak=EzfQTH533pbevnhohMX4QZRK"></script>
	<script type="text/javascript"
		src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
	<title>客户拜访情况</title>
	<Script language="javascript">
        var info = new Array(); //存放提示信息窗口对象的数组  
        var markerArr = new Array();
        
	  	window.onload = map_load;  

	  	function map_load() {  
      //异步调用百度js  注意ak要换成您的密钥
      		var load = document.createElement("script");  
	      	load.src = "http://api.map.baidu.com/api?v=2.0&ak=EzfQTH533pbevnhohMX4QZRK&callback=map_init";  
      		document.head.appendChild(load);  
	  }
		
	  	function map_init(event){
			markerArr = JSON.parse(localStorage.getItem("com.justep.OA.mapInfo"));
			var map = new BMap.Map("allmap"); // 创建Map实例  
	        var point = new BMap.Point(markerArr[0].point.split(",")[0], markerArr[0].point.split(",")[1]); //地图中心点，第一个客户  
	        map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。  
	        map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
	        map.enableDragging();   //开启拖拽
	         //向地图中添加缩放控件  
	        var ctrlNav = new window.BMap.NavigationControl({  
	        	anchor: BMAP_ANCHOR_TOP_LEFT,  
	        	type: BMAP_NAVIGATION_CONTROL_LARGE  
	        });  
	        map.addControl(ctrlNav);  
	  
	         //向地图中添加缩略图控件  
	        var ctrlOve = new window.BMap.OverviewMapControl({  
	        	anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
	        	isOpen: 1  
	        });  
	        map.addControl(ctrlOve);  
	  
	         //向地图中添加比例尺控件  
	        var ctrlSca = new window.BMap.ScaleControl({  
	        	anchor: BMAP_ANCHOR_BOTTOM_LEFT  
	        });  
	        map.addControl(ctrlSca);  
	 
	 		var point = new Array(); //存放标注点经纬信息的数组  
	        var marker = new Array(); //存放标注点对象的数组  
	         
	        for (var i = 0; i < markerArr.length; i++) {  
	       	 	var p0 = markerArr[i].point.split(",")[0]; //  
	        	var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来  
	        	point[i] = new BMap.Point(p0, p1); //循环生成新的地图点  
	        	marker[i] = new BMap.Marker(point[i]); //按照地图点坐标生成标记  
	        	map.addOverlay(marker[i]);  
	        	 //marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
	        	var label = new BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });  
	        	marker[i].setLabel(label);  
	        	
	        	var sInfo = "<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title 
   					 + "</br><img id='imgDemo' src='" + markerArr[i].image 
   					 + "' height='104' title='照片'/></br>";
   				if(markerArr[i].person != undefined)
   					sInfo = sInfo + "业务员：" + markerArr[i].person + "</br> ";
   	   			if(markerArr[i].date != undefined)
   	   				sInfo = sInfo + "拜访日期：" + markerArr[i].date + "</br> "
   	   			sInfo = sInfo + "拜访次数：" + markerArr[i].num + "</br> "
				if(markerArr[i].summary != undefined)
					sInfo = sInfo + "总结：" + markerArr[i].summary + "</br>";
					
	        	info[i] = new BMap.InfoWindow(sInfo + "</p>"); // 创建信息窗口对象  
	        	 
	        	var self = this;
	        	marker[i].addEventListener("click", function (e) {  
	        		var iIndex = self.findInfo(this.getLabel().content);
	        		this.openInfoWindow(info[iIndex]);  
	        	   	document.getElementById('imgDemo').onload = function (){
	        	   		info[iIndex].redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
	        		}
	        	});  
	        }  
		};
		
		function findInfo(label){
	         for (var i = 0; i < markerArr.length; i++) {  
	        	 if(markerArr[i].title == label){
	        		 return i;
	        	 }
	         }
		};
	</Script>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>